extends ../layout
block content
    h2.text-center Commit to yourself. Commit to a nonprofit.
    .row
        .col-xs-12.col-sm-6.col-sm-offset-3
          p Give yourself external motivation and help nonprofits right away. Pledge a monthly donation to a nonprofit until you’ve earned either your Front End or Full Stack Development Certification.

    .row
        .col-xs-12.col-sm-6.col-sm-offset-3.text-center
          h3 Pledge to #{displayName}&thinsp;
          .button-spacer
              a(href='#{imgUrl}' data-lightbox='img-enlarge' alt='#{imgAlt}')
                  img.img-responsive(src='#{imgUrl}' alt='#{imgAlt}')
              p.large-p
                = description
              p
                a(href='/commit/directory') ...or see other nonprofits
    .spacer
    form.form(name='commit')
        .hidden
            input(type='text' value='#{name}' name='nonprofit')
        .row
            .col-xs-12.col-sm-6.col-sm-offset-3
                h3 Step 1: Which certification do you pledge to complete?
                .btn-group.btn-group-justified(data-toggle='buttons' role='group')
                    label.btn.btn-primary.btn-lg.active
                        input(type='radio' id=frontEndCert value=frontEndCert name='goal' checked="checked")
                        | Front End
                    label.btn.btn-primary.btn-lg
                        input(type='radio' id=dataVisCert value=dataVisCert name='goal')
                        | Data
                    label.btn.btn-primary.btn-lg
                        input(type='radio' id=backEndCert value=backEndCert name='goal')
                        | Back End
                    label.btn.btn-primary.btn-lg
                        input(type='radio' id=fullStackCert value=fullStackCert name='goal')
                        | Full Stack
        .spacer
        .row
            .col-xs-12.col-sm-6.col-sm-offset-3
                h3 Step 2: How much do you want to pledge monthly until you earn that certification?
                .btn-group.btn-group-justified(data-toggle='buttons' role='group')
                    label.btn.btn-primary
                        input(type='radio' id='5-dollar-pledge' value='5' name='amount')
                        | $5 per month
                    label.btn.btn-primary.active
                        input(type='radio' id='10-dollar-pledge' value='10' name='amount' checked="checked")
                        | $10 per month
                    label.btn.btn-primary
                        input(type='radio' id='25-dollar-pledge' value='25' name='amount')
                        | $25 per month
                    label.btn.btn-primary
                        input(type='radio' id='50-dollar-pledge' value='50' name='amount')
                        | $50 per month
        .spacer
        .col-xs-12.col-sm-6.col-sm-offset-3
            h3 Step 3: Set up your monthly donation
        .row
            .col-xs-12.col-sm-6.col-sm-offset-3.text-center
                a#commit-btn-donate.btn.btn-block.btn-lg.btn-primary(href=donateUrl target='_blank') Open the #{displayName} donation page

        .spacer
        .col-xs-12.col-sm-6.col-sm-offset-3
            h3#commit-step4-text.disabled
                Step 4: Confirm
                span#commit-step4-hidden.disabled  (Do step 3 first)
                span#commit-step4-show.hidden  your commitment to your goal
        .row
            .col-xs-12.col-sm-6.col-sm-offset-3.text-center
                button#commit-btn-submit.btn.btn-block.btn-lg.btn-primary.disabled Commit

    if pledge
        form.row(name='stop-pledge' action='/commit/stop-commitment' method='post')
            .col-xs-12.col-sm-6.col-sm-offset-3.text-center
                .button-spacer
                button.btn.btn-block.btn-lg.btn-default(name='submit' type='submit') Stop my current pledge
    else
        .row
            .col-xs-12.col-sm-6.col-sm-offset-3.text-center
                .button-spacer
                a.btn.btn-block.btn-lg.btn-default(href='/map') Maybe later
    script.
      $(function() {
        $('#commit-btn-donate').click(function() {
          $('#commit-btn-submit').removeClass('disabled');
          $('#commit-step4-text').removeClass('disabled');
          $('#commit-step4-hidden').hide();
          $('#commit-step4-show').removeClass('hidden');
        });

        $('#commit-btn-submit').click(function() {

          if (
            history &&
            typeof history.pushState === 'function'
          ) {
            history.pushState(history.state, null, '/commit/pledge?' + $('form').serialize());
            return null;
          }

          window.location.href = '/commit/pledge?' + $('form').serialize();
        });
      });
